<template>
  <div class="root">
    <div class="ComHeader">
      <div class="heaLef">句读</div>
      <div class="heaRig">
        <!-- 信息 -->
        <p>
          <router-link :to="'/xiangqing/' + textListInfo[index].uuid">
            <i class="fa fa-commenting-o"></i>
          <span :v-model="index" v-text="textListInfo[index].comment_count"></span>
          </router-link>
          
        </p>

        <!-- 心 -->
        <p>
          <i class="fa fa-heart-o"></i>
          <span :v-model="index" v-text="textListInfo[index].like_count"></span>
        </p>
        <p>
          <span class="fa fa-share-square-o"></span>
        </p>
      </div>
    </div>

    <swiper v-model="index" class="lunbo" :min-moving-distance="300" :show-dots="false" height="150vw">
      <swiper-item class="item" v-for="(text , index) in textListInfo" :key="index">
        <router-link :to="'/xiangqing/' + text.uuid">
          <!-- 判断image是否为空 -->
          <div @click="cancelTab">
            <img v-if="text.image != null" :src="text.image.url" class="im">
            <p class="cont" v-text="text.content"></p>
            <!-- 判断author是否为空  写书名-->
            <p v-if="text.author != null" class="autAndbook">
              <span v-text="text.author.name"></span>
              <span v-if="text.reference != null" v-text="text.reference.name"></span>
            </p>
            <p v-else class="autAndbook">
              <span v-if="text.reference != null" v-text="text.reference.name"></span>
            </p>
            <!--时间 -->
            <div class="time">
              <p v-text="text.daily_date"></p>
            </div>
          </div>
        </router-link>>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperItem, Popup } from "vux";
import bus from "../js/bus.js";
export default {
  data: function() {
    return {
      show8: false,
      textListInfo: [],
      a: 0,
      index: 0
    };
  },
  components: {
    Swiper,
    SwiperItem,
    Popup
  },
  created() {
    this.getTextListInfo();
  },
  methods: {
    getTextListInfo: function() {
      var _this = this;
      this.$http
        .get(
          "/judou/api/v6/op/sentences/daily?page=1&per_page=30&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545183685&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=5f5672d179a08108de7a0b697257ae98"
        )
        .then(function(value) {
          _this.textListInfo = value.body.data;
          bus.$emit("xqNumData", this.textListInfo);
        });
    },
    cancelTab: function() {
      $(".weui-tabbar").hide();
    },
  }
};
</script>
<style scoped>
a:-webkit-any-link{
  text-decoration: none;
  color: rgb(177, 175, 175);
}
.time{
  /* border: 1px solid black; */
  position: absolute;
  top: 50vw;
  right: 3vw;
  font-size: 4vw;
  color: rgb(207, 198, 198);
}
*{
  margin: 0;
  padding: 0;
}
.ComHeader {
  /* border: 1px solid black; */
  width: 98vw;
  height: 20vw;
  display: flex;
  justify-content: space-around;
  color: rgb(177, 175, 175);
}
.heaLef {
  width: 30vw;
  height: 10vw;
  margin-top: 5vw;
  text-align: left;
  font-size: 8vw;
}
.heaRig {
  width: 50vw;
  height: 15vw;
  margin-top: 2vw;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.heaRig p{
  font-size: 5vw;
  margin-top: 10%;
}

.vux-slider > .vux-swiper > .vux-swiper-item > a {
  text-decoration: none;
  color: black;
}
.ccc {
  width: 90vw;
  height: 50vw;
  border: 2px solid black;
}
.lunbo {
  width: 100vw;
  color: black;
}
vux-swiper-item {
  width: 98vw;
}
.im {
  width: 100vw;
  height: 50vw;
}
.cont {
  margin: 30vw 10vw;
  font-size: 5vw;
}
.autAndbook {
  text-align: right;
  margin-top: -27vw;
  margin-right: 5vw;
  font-size: 4.3vw;
}
</style>